    ion-content {
        --background: var(--ion-background-color, #000);
    }
    
    video {
        width: 100%;
    }
    
    .back {
        z-index: 202;
        position: fixed;
        top: 10px;
        left: 0;
        color: white;
        display: flex;
        align-items: center;
        span {
            margin-right: 8px;
            font-size: 20px;
            width: 40px;
            padding: 10px 15px;
            display: grid;
        }
        label {
            font-size: 16px;
            margin-top: -3px;
            text-shadow: 1px 1px 1px #000;
        }
    }
    
    .hide-all {
        visibility: hidden;
    }
    
    .back-drop {
        z-index: 200;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        top: 0;
        left: 0;
    }
    
    //   .left-bg{
    //     height: 100%;
    //     width: 18%;
    //     position: absolute;
    //     top: 0;
    //     left:0;
    //     padding: 65px 0 0;
    //     background-color: #000;
    //     z-index: 201;
    //   }
    .left {
        height: 100%;
        width: 18%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 65px 0 0;
        z-index: 201;
        display: flex;
        flex-direction: column;
        // background-color: rgba(0,0,0,.3);
        background-color: #000;
        ion-scroll {
            flex: 1;
        }
        .square {
            position: relative;
            padding: 10px 0 10px 10px;
            .square-bg {
                background: red;
                position: absolute;
                height: 54px;
                left: 0;
                top: 0;
            }
            .title {
                font-size: 8px;
                color: rgba(255, 255, 255, .5);
                line-height: normal;
            }
            .unit {
                font-size: 8px;
                color: rgba(255, 255, 255, .5);
                line-height: normal;
            }
            .dataFlex {
                display: flex;
                margin-top: -5px;
                div {
                    white-space: nowrap;
                    color: #0FEE2F;
                    font-size: 17px;
                    .separator {
                        color: #0FEE2F;
                        margin-right: -3px;
                    }
                    .fontSize13 {
                        font-size: 13px;
                    }
                }
            }
        }
        .paramsSelected {
            // background: linear-gradient(left, #2D2D2D, transparent);
            background: #2d2d2d;
            .dataFlex {
                div {
                    color: #d3d3d3;
                    .separator {
                        color: #d3d3d3;
                    }
                }
            }
        }
        .device-state {
            margin: 15px 0;
            padding: 0 15px;
            .device-img {
                text-align: center;
                img {
                    height: 30px;
                }
            }
            .each-state {
                display: flex;
                justify-content: space-between;
                >div {
                    text-align: center;
                    >p {
                        margin: -5px 0;
                        color: #D3D3D3;
                    }
                    .value {
                        font-size: 18px;
                    }
                    .unit {
                        font-size: 8px;
                        color: rgba(255, 255, 255, .5);
                    }
                }
            }
        }
    }
    
    //   .chart-bg{
    //     border-radius:6px;
    //     width: 60%;
    //     height: 36%;
    //     bottom: 15px;
    //     left: 20%;
    //     position: absolute;
    //     background:hsla(0,0%,100%,.25) border-box;
    //     box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
    //     text-shadow:0 1px 1px hsla(0,0%,100%,.3);
    //     filter:blur(20px);
    //   }
    .middle {
        width: 60%;
        height: 36%;
        border-radius: 6px;
        bottom: 15px;
        left: 20%;
        position: absolute;
        background: rgba(0, 0, 0, .5);
        box-shadow: 0 0 10px #999;
        z-index: 201;
    }
    
    .menu-side {
        height: 100%;
        width: 18%;
        // min-width: 80px;
        // max-width: 100px;
        position: absolute;
        top: 0;
        right: 0;
        color: white;
        // background-color: rgba(0,0,0,.3);
        background-color: #000;
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        z-index: 201;
        >p {
            text-align: center;
            height: 40px;
            margin: 5px;
            ion-icon {
                font-size: 40px;
            }
            img {
                height: 30px;
            }
        }
        @keyframes rotating {
            from {
                transform: rotate(0)
            }
            to {
                transform: rotate(360deg)
            }
        }
        .video-list {
            width: 100%;
            flex: 1;
            text-align: center;
            .video-item {
                opacity: .5;
                margin-bottom: 25px;
                .video-link {
                    width: 45px;
                    height: 45px;
                    margin: 0 auto;
                    background-color: lightsteelblue;
                }
            }
            .sand {
                opacity: 1 !important;
                img {
                    border: 1px solid #01ABFF;
                }
            }
        }
    }
    
    .greenColor {
        color: #0FEE2F !important;
    }
    
    .redColor {
        color: #EE0F0F !important;
    }